<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <title>Faeple</title>
    
    <link href="/resources/css/bootstrap.css?20141016" rel="stylesheet">
    <!--[if lt IE 9]>
		<script src="/resources/js/html5shiv.js"></script>
		<script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="/resources/css/font-awesome.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css">
    <style type="text/css">
    	body {
			font-family:"나눔고딕",NanumGothic,"맑은 고딕","Malgun Gothic","Apple SD Gothic Neo","돋움",dotum,Arial,sans-serif;
			font-size:14px;
			line-height:1.428571429;
			color:#333;
		}
		.explore{ position: absolute; top: 25px; right:25px; z-index:20;}
		.bg{ width: 100%; height:100%; position: absolute; top:0; left:0; bottom:0; right:0; z-index: 5; background-color: #353535; -ms-filter: 'alpha(opacity=85)'; opacity:.85;}
		.post_wrapper { width: 100%; height: 100%; overflow: hidden; z-index: -1; position: relative; }
		#itemList { 
			width: 130%; height: 100%; padding: 0 15px; position: absolute; top:0;left:0;background-color:#eee;
			opacity: 0;
			-webkit-transition:opacity 0.5s ease-in-out;
			-moz-transition:opacity 0.5s ease-in-out;
			-o-transition:opacity 0.5s ease-in-out;
			transition:opacity 0.5s ease-in-out;
		}
		.itembox { width: 250px; background-color: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.18); -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.18); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.18); margin-bottom: 15px; }
		.item-image{ width: 100%; }
		.item-image img{ border-top-left-radius: 3px; border-top-right-radius: 3px; width:100%; height: auto; }
		.item-profile{ padding: 8px 0; position: relative; }
		.profile-img{ position: absolute; left: 12px; width: 35px; height: 35px; border-radius: 50%; overflow: hidden; }
		.profile-img img { width: 100%; height: 100%; }
		.profile-info { padding-left:60px; }
		.profile-name { color: #527896; font-size: 14px; margin:0; font-weight: bold; }
		.profile-time {color: #AAAAAA; font-size: 11px; }
		.item-content {padding:8px 12px; font-size: 12px; color: #666; word-break: break-all; height:79px; overflow: hidden; }
		.content{ position: absolute; top:25%; left: 50%; margin-left:-180px; width: 400px; height: 500px; z-index:10; }
		.welcome-logo { text-align: center; margin-bottom: 35px; }
		.welcome-text{ color: #fff; text-shadow: 0px 2px rgba(0,0,0,0.15); font-size: 18px; padding: 0 20px; }
		.login-wrapper{box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.22);}
		.footer{ position:absolute; bottom:10px; margin:0 auto; z-index:10; width:100%; text-align:center; }
		.footer > ul > li > a { color: #fff; text-shadow: 0px 2px rgba(0,0,0,0.15); }
		.btn-wrapper{ text-align: center; margin-top: 45px; }
		.btn-tran { border: 1px solid rgba(255,255,255,0.6); border-radius:4px; color: #fff!important; text-shadow: 0px 2px rgba(0,0,0,0.15); }
		.btn-tran:hover{ background-color: rgba(255,255,255,0.7); }
		.dropdown-menu:before {
			position: absolute;
			bottom: -7px;
			left: 9px;
			display: inline-block;
			border-right: 7px solid transparent;
			border-top: 7px solid #fff;
			border-left: 7px solid transparent;
			content: '';
		}
		.dropdown-menu:after {
			position: absolute;
			bottom: -6px;
			left: 10px;
			display: inline-block;
			border-right: 6px solid transparent;
			border-top: 6px solid #fff;
			border-left: 6px solid transparent;
			content: '';
		}
		.fbtn{ border-radius:3px; height:45px; width: 95px; padding-top:9px; font-size: 18px; }
		@media screen and (max-width: 450px){ .content{width:100%; margin-left:0; left:0; padding:0 10px; top:0; margin-top:80px; } .footer{margin-top:25px;} .explore{top:15px;right:15px;} }
    </style>
    <script>
  		var filter = "win16|win32|win64|mac|macintel";
   		if(navigator.platform){
   		    if(filter.indexOf(navigator.platform.toLowerCase())<0){
   		    	window.location = "/mobile/home";
   		    }else{
   		    	
   		    }
   		}else{
   			
   		}
    </script>
</head>
<body>
<a href="/latest" class="btn btn-tran btn-lg explore" title="<spring:message code="common.explore"/>"><spring:message code="common.explore"/></a>
<div class="bg"></div>
<div class="post_wrapper"><div id="itemList"></div></div>
<div class="content">
	<div class="welcome-logo"><img src="/resources/img/home_logo.png"></div>
	<div class="welcome-text"><p><spring:message code="common.welcome1"/></p><p><spring:message code="common.welcome2"/></p></div>
	<div class="btn-wrapper">
		<a href="/signup" class="btn fbtn" style="margin-right: 20px; background-color: #FFC346; color:#000; box-shadow: 0 2px 0 0 #df9700;" title="<spring:message code="common.sign"/>"><spring:message code="common.sign"/></a>
		<a href="/login" class="btn fbtn" title="<spring:message code="head.login"/>" style="background-color:#4A9DDB; color:#fff; box-shadow: 0 2px 0 0 #0077d0;"><spring:message code="head.login"/></a>
	</div>
</div>
<div class="footer">
	<div style="margin-bottom:25px;"><a href="https://play.google.com/store/apps/details?id=com.faeple" target="_blank"><img alt="Get it on Google Play" src="https://developer.android.com/images/brand/en_generic_rgb_wo_45.png" style="border:0;" /></a></div>
	<ul class="list-inline">
		<li><a href="/company" title="<spring:message code="common.about"/>"><spring:message code="common.about"/></a></li>
		<li><a href="/help" title="<spring:message code="common.help"/>"><spring:message code="common.help"/></a></li>
		<li class="dropdown dropup">
			<a href="#" class="dropdown-toggle" data-toggle="dropdown" title="<spring:message code="common.language"/>"><spring:message code="common.language"/></a>
			<ul class="dropdown-menu" style="box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.42);border:0;bottom:150%;min-width:130px;">
				<li><a href="/setChangeLocale?lang=ko">한국어</a></li>
				<li><a href="/setChangeLocale?lang=en">English</a></li>
				<li class="disabled"><a tabindex="-1" title="中国服务准备">中國語</a></li>
				<li class="disabled"><a tabindex="-1" title="日本のサービスは準備中です">日本語</a></li>
			</ul>
		</li>
		<li style="color: #fff;">© 2014 Faeple</li>
		<li><div class="fb-like" data-href="https://www.facebook.com/faeple/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div></li>
	</ul>
</div>
<div id="ieWar" style="position:absolute; background-color:#fff; display:none; text-align:center; left:50%; margin-left:-140px; top: 25%; z-index:999; width:280px; height:250px; border:1px red solid; padding:7px; " >
<br><i class="glyphicon glyphicon-exclamation-sign" style="color:red; font-size:18pt;"></i><br><br>
현재 사용중인 익스플로러 버전으로는 패플을 이용하는대 어려움이 있습니다<br><br>
익스플로러 버전을 최소 9이상으로 업데이트 해주시거나 크롬을 설치해 이용해 주세요<br>
<br><a href="#" onclick="$('#ieWar').fadeOut();">[닫기]</a><br>
</div>
</body>
<script src="/resources/js/jquery-1.11.0.js"></script>
<script src="/resources/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="/resources/js/masonry.pkgd.min.js"></script>
<script src="/resources/js/imagesloaded.js"></script>
<script src="/resources/js/bootstrap.js"></script>
<script type="text/javascript">
	function getInternetExplorerVersion() {    
		var rv = -1;
		if (navigator.appName == 'Microsoft Internet Explorer') {        
			var ua = navigator.userAgent;        
			var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");        
			if (re.exec(ua) != null)            
			rv = parseFloat(RegExp.$1);    
		}    
		return rv; 
	}
	
	if(getInternetExplorerVersion()==8){
		$("#ieWar").show();
	}
	
	$(function(){
		var top = -1;
		if($(window).innerWidth() > 768){
			$(".post_wrapper").css("height",$(window).innerHeight());
			loadEvent();
		}else{
			$("body").css("background-image", "url('/resources/img/signup_background.jpg')");
			$(".bg").hide();
			$(".explore").removeClass("btn-lg");
		}
		setInterval(function(){
			$("#itemList").css("top", --top);
		}, 150);
	});
	
	function timeleft(time){
		var startDate = new Date(time.substring(0,4),time.substring(5,7),time.substring(8,10),time.substring(11,13),time.substring(14,16),00);
		var dt = new Date();
		var endDate  = new Date(dt.getFullYear(),dt.getMonth()+1 ,dt.getDate() ,dt.getHours() ,dt.getMinutes() ,00);
		var time_left = (endDate.getTime() - startDate.getTime()) / 60000;
		var time = 1000*60*60*24;
		if(time_left == 0){
			time_left = "<spring:message code='post.time.now' javaScriptEscape='true'/>";
		}else if(time_left < 60){
			time_left += "<spring:message code='post.time.mins' javaScriptEscape='true'/>";
		}else if(time_left < 1440){
			time_left = parseInt(time_left/60)+"<spring:message code='post.time.hours' javaScriptEscape='true'/>";
		}else if(time_left > 1440){
			var e_day = parseInt((endDate.getTime() - startDate.getTime()) / time);
			time_left = e_day+"<spring:message code='post.time.days' javaScriptEscape='true'/>";
			var e_month = parseInt((endDate.getTime() - startDate.getTime()) / (time*30));
 			if(e_day > 29){
 				time_left = e_month+"<spring:message code='post.time.months' javaScriptEscape='true'/>";
 			}
 			if(e_month > 11){
 				time_left = parseInt((endDate.getTime() - startDate.getTime()) / (time*30*12))+"<spring:message code='post.time.years' javaScriptEscape='true'/>";
 			}
		}
		return time_left;
  	}
	
	function loadEvent(){
		$.ajax({
			type : "post"
		    , url : "/loadRandomPost?size=60"
		    , dataType : "json"
		    , timeout : 5000
		    , error : function(){
		    }
		    , success : function(response) {
		    	var list = $("#itemList");
		    	var html = "";
		    	for(var i=0;i<response.length;i++){
		   			html += "<div class='itembox'><div class='item-image'><img src='/resources/upload/post/thumbnail/"+response[i].image1+"'></div><div class='item-profile'><div class='profile-img'><img src='/resources/upload/profile/thumbnail/"+response[i].profileImage+"'></div><div class='profile-info'><p class='profile-name'>"+response[i].author+"</p><p class='profile-time'>"+timeleft(response[i].create_date)+"</p></div><div class='item-content'>"+response[i].content+"</div></div></div>";
		   		}
		    	list.append(html);
    			imagesLoaded(list, function(instance) {
    				list.masonry({
                		itemSelector: ".itembox",
                		"gutter": 15,
                		transitionDuration : 0
                	});
    				list.css("opacity", "1");
           		});
		    }
		});
	}
	
	window.fbAsyncInit = function() {
		FB.init({appId: '1427921877464450', status: true, cookie: true,xfbml: true});
    };
    
	(function(d){
	     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
	     if (d.getElementById(id)) return;
	     js = d.createElement('script'); js.id = id; js.async = true;
	     js.src = "//connect.facebook.net/ko_KR/all.js";
	     ref.parentNode.insertBefore(js, ref);
	}(document));
</script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-55543645-1', 'auto');
  ga('send', 'pageview');
</script>
</html>